﻿@page "/Courses"
@inject CourseService CourseService
@inject NavigationManager Navigation
@attribute [Authorize]
@using Microsoft.AspNetCore.Authorization
@using AntDesign
@using lcwb.Shared.Service
@using lcwb.Shared.Model

<PageHeader Style="height: auto" Title="课程列表" Subtitle="所有可用课程" />

<div>
    <Space Style="fill: left">
        <Input @bind-Value="searchText"
               Placeholder="搜索课程名称"
               OnKeyDown="@HandleKeyDown"
               AllowClear
               Style="width: 300px">
        <Suffix>
            <Icon Type="search" />
        </Suffix>
        </Input>
        <Button Type="ButtonType.Primary" OnClick="HandleSearch">搜索</Button>
    </Space>
    <br />
    <div style="height: calc(100vh - 340px); overflow-y: auto; padding: 16px; background: #f0f2f5;">

        <Spin Tip="加载中..." Spinning="@isLoading">

            <div style="padding: 20px; background: #f0f2f5;">
                <!-- 第一行 -->
                <Row Gutter="16" Style="margin-bottom: 16px;">
                    <Col Span="6">@GetCourseCard(0)</Col>
                    <Col Span="6">@GetCourseCard(1)</Col>
                    <Col Span="6">@GetCourseCard(2)</Col>
                    <Col Span="6">@GetCourseCard(3)</Col>
                </Row>

                <!-- 第二行 -->
                <Row Gutter="16" Style="margin-bottom: 16px;">
                    <Col Span="6">@GetCourseCard(4)</Col>
                    <Col Span="6">@GetCourseCard(5)</Col>
                    <Col Span="6">@GetCourseCard(6)</Col>
                    <Col Span="6">@GetCourseCard(7)</Col>
                </Row>

                <!-- 第三行 -->
                <Row Gutter="16" Style="margin-bottom: 16px;">
                    <Col Span="6">@GetCourseCard(8)</Col>
                    <Col Span="6">@GetCourseCard(9)</Col>
                    <Col Span="6">@GetCourseCard(10)</Col>
                    <Col Span="6">@GetCourseCard(11)</Col>
                </Row>

                <!-- 第四行 -->
                <Row Gutter="16" Style="margin-bottom: 16px;">
                    <Col Span="6">@GetCourseCard(12)</Col>
                    <Col Span="6">@GetCourseCard(13)</Col>
                    <Col Span="6">@GetCourseCard(14)</Col>
                    <Col Span="6">@GetCourseCard(15)</Col>
                </Row>
            </div>

        </Spin>
    </div>
</div>
<div style="text-align: center; margin-top: 16px;">
    <Pagination Total="@courses.Count"
    PageSize="16"
    Current="@currentPage"
    OnChange="HandlePageChange"
    ShowSizeChanger="false" />
    
</div>

@code {
    [Inject] private CourseStateService State { get; set; }
    private List<Course> courses = new();
    private bool isLoading = true;
    private int currentPage = 1;

    private string searchText;
    private void HandleKeyDown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            //HandleSearch();
        }
    }
    private async Task HandleSearch()
    {
        // 保持原有搜索逻辑
    }

    protected override async Task OnInitializedAsync()
    {
        try
        {
            courses = await CourseService.GetCoursesAsync();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"课程加载失败: {ex.Message}");
        }
        finally
        {
            isLoading = false;
        }
    }

    // 构建课程卡片
    private RenderFragment BuildCourseCard(Course course)
    {
        return @<Card Hoverable Bordered="true"
                          Style="border-radius: 8px; cursor: pointer;">
        <!-- 图片区域 -->
        <div style="height: 120px; overflow: hidden; border-radius: 8px 8px 0 0;">
            <img src="@(string.IsNullOrEmpty(course.ImageUrl) ? "../favicon.png" : course.ImageUrl)"
                 alt="@course.CourseName"
                 style="width: 100%; height: 100%; object-fit: cover;"
                 loading="lazy" />
        </div>

        <!-- 内容区域 -->
        <div style="padding: 12px;">
            <h3 style="margin: 0 0 8px 0; font-size: 14px; font-weight: 600;">
                @course.CourseName
            </h3>
            <p style="margin: 0; color: #666; font-size: 12px; line-height: 1.5;">
                @course.Introduction
            </p>
        </div>
        <Button Style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;"
                OnClick="() => HandleCardClick(course.Id)">
        </Button>
    </Card>;
    }

    // 获取课程卡片的 RenderFragment
    private RenderFragment GetCourseCard(int index)
    {
        var adjustedIndex = (currentPage - 1) * 16 + index; // 计算当前课程索引
        if (adjustedIndex < courses.Count)
        {
            return BuildCourseCard(courses[adjustedIndex]);
        }
        else
        {
            return BuildEmptyPlaceholder();
        }
    }

    private void HandleCardClick(int CourseId)
    {
        State.CurrentCourseId = CourseId;
        State.CurrentChapterId = 0;
        string URL = $"/Courses/CoursePage";
        Navigation.NavigateTo(URL);
    }

    // 构建空白占位符
    private RenderFragment BuildEmptyPlaceholder()
    {
        return @<div style="background: transparent; height: 180px;"></div>;
    }

    private void HandlePageChange(PaginationEventArgs args)
    {
        currentPage = args.Page;
    }
}